/**
 * 时间：2021-06-08
 * 作者：韩万路
 * 公司：中亿丰信息
 * 名称：svg中的主要模块
 * 功能：主要是主要模块的组件
 * 优先级:高
 */

Vue.component("main_group_home", {
    data() {
        return {
            id: this.toUuid,
            uuid: this.toUuid, //动态数字名称

            name: "main_group_home", //当前的名称是模块的名称

            parentName: "", //当前父级模块名称
            childrenName: "canvas_svg_table", //当前子集创建的模块名称 canvas_svg_table

            childrenNodeArray: [], //当前子集的name数组

            parentNode: null, //当前父级的node节点创建时必须有node





            data: {
                btnRight:true,//当前左右按钮点击
                btnLeft:true,

                thisDelete: false,  //当前删除?
                childrenListId:[],
                position: {
                    x: 0,
                    y: 0,
                },
                innerSize: {
                    width: 210,
                    height: 70,
                },
                parentId: "",
                name: main.requestData.projectName,
                font_size: 16,
            },


            data_on_childrenShrinkage: true, //当前的子集是否隐藏  true 是不隐藏

        }
    },
//     <text   text-rendering="inherit" dominant-baseline="text-before-edge"
//     :font-size="data.font_size" :y="10"  :x="data.font_size" 
//     :w="computed_textWidth"
//  >
//     文本域{data.text}!
// </text>


    template: `
        <g 
            :id="computed_toUuid" 
            class="movefalse" 
            :class="name"
            :transform="'matrix( 1 0 0 1 '+ (data.position.x)  +' '+ (data.position.y) +' )'"
            style="z-index:999"
        >
            <rect 
                class="fil2 str2" 
                x="0" 
                y="0" 
                :width="computed_textWidth" 
                :height="data.innerSize.height" 
                rx="6" 
                ry="6"  
                stroke="rgba(57, 80, 96,0)" 
                stroke-width="3" 
                fill="#ffffff" 
                filter="url(#dropshadow)" 
                >

            </rect>    

            <foreignObject 
                :x="-30 - 5" 
                :y="0" 
                :width="computed_textWidth + 30*2 + 5*2" 
                :height="data.innerSize.height" 
                style="position:absolute"
                class="foreignObject"
            >
                <!--主要内容-->
                <div class="foreignObject-header">
                    <div class="foreignObject-icon logo-icon-db"></div>
                    <div class="foreignObject-name"
                        style="
                            
                        "
                    >文本域{component_main.requestData.projectName}!</div>
                    <button 
                        class="btn-add  btn-icon-useradd"
                        v-on:click="fun_on_createChildren('space_component_users')"
                    ></button>
                    <button 
                        class="btn-add  btn-icon-tableadd"
                        v-on:click="fun_on_createChildren('space_component_mode')"
                    ></button>
                </div>
                <!--扩展解释-->
                <div class="foreignObject-items">
                    <span>类型:文本域{data.type}!</span>
                    <!--<span>
                      <span class="foreignObject-tag"></span>
                    </span>
                    -->
                </div>
                <!--左右按钮-->
                <div class="">
                    
                    <button class="btn-add  btn-icon-link-left" :style="{transform:data.btnLeft?'rotateY(180deg)':'rotateY(0deg)'}"   v-on:click="fun_on_childrenShrinkage(false)"></button>
                    <button class="btn-add  btn-icon-link-right" :style="{transform:data.btnRight?'rotateY(180deg)':'rotateY(0deg)'}"   v-on:click="fun_on_childrenShrinkage(true)"></button>
                </div>
              
            </foreignObject>

           
            

        </g>
    `,
    props: ["toUuid","modelType"],
    computed: {
        /**
         * 计算属性  : 计算当前宽度多少
         * @returns 
         */
        computed_textWidth: function() {
            //字体长度 乘以 字体大小 加上边框
            // let width = this.data.text.length * this.data.font_size + (20 * 2);

            // //减去字是否是英文和标点符号
            // let charCodeLine = 0;
            // for (let index in this.data.text) {
            //     if (this.data.text[index].charCodeAt() <= 200) {
            //         charCodeLine++;
            //     }
            // }
            // //当前的英文标点符号乘以字体大小除以2半个字符
            // width -= (charCodeLine * this.data.font_size) / 2;

            // //外加设备信息
            // width += 0;

            // this.data.innerSize.width = width;
            return this.data.innerSize.width;
        },
        computed_toUuid: function() {

            this.fun_thisToChildren();
            return this.toUuid;
        },
        /**
         * 
         * @returns 
         */
        computed_childrenLength: function() {

            return Object.keys(this.childrenNodeArray).length;
        },
        /**
         * 获取index中的数据
         */
        component_main:function()
        {
            return main;
        }
    },
    methods: {


        /**
         * 获取数据
         */
        fun_getData() {
            return this.data;
        },
        /**
         * 插入数据 覆盖
         */
        fun_setData(data) {
            let newData = {...this.data,...data};
            this.data = newData;

        },
        /**
         * 初始化创建的时候获取main里面的server和app里面的值并且传入到当前
         */
        fun_initGetMainData:function(){
            let mainData = main.requestData[this.modelType][this.id].data
            this.fun_setData(mainData);

            this.$set(
                main.requestData[this.modelType][this.id],
                "data",
                this.fun_getData()
            );
        },

        /**
         * 发送当前的this到外部
         */
        fun_thisToChildren: function() {
            // this.$emit('increase', this);
        },
        
        /**
         * 点击执行children收缩
         */
        fun_on_childrenShrinkage: function(isRight) {
            if(isRight)
            {
                this.data.btnRight = !this.data.btnRight;
            }else
            {
                this.data.btnLeft = !this.data.btnLeft;
            }
        },
        /**
         * 创建内容
         */
        fun_on_createChildren(craeteComponentName)
        {   
            main.fun_component_addChildren(this.id,craeteComponentName);
        }

    },
    created() {
        //创建完毕后插入到当前对象
        this.fun_initGetMainData();


    }

})